import {Component} from "react";
import {View, Text, Image} from "@tarojs/components";
import {AtButton} from 'taro-ui'
import {AtAvatar} from 'taro-ui'
import "./index.less";
import {abstractSvc} from "../../serverConfig/serverManager";
import Zoom from 'react-reveal/Zoom'
import Slide from 'react-reveal/Slide'
import Fade from 'react-reveal/Fade'
import Flip from 'react-reveal/Flip';
import Jello from 'react-reveal/Jello';
import Flash from 'react-reveal/Flash';
import Swing from 'react-reveal/Swing';
import Roll from 'react-reveal/Roll';
import LightSpeed from 'react-reveal/LightSpeed';

export default class MessageComponent extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
  }

  componentWillUnmount() {
  }

  componentDidShow() {
  }

  componentDidHide() {
  }

  state = {}


  render() {
    let myIcon = <></>
    let yourIcon = <></>
    let messageClass = null
    let animation = null
    if (this.props.type === 'me') {
      myIcon = <View className='icon'><Image className='iconImg' src={this.props.icon}/></View>
      yourIcon = <></>
      messageClass = 'myMessage'
      animation = false
    }
    if (this.props.type === 'you') {
      yourIcon = <View className='icon'><Image className='iconImg' src={this.props.icon}/></View>
      myIcon = <></>
      messageClass = 'yourMessage'
      animation = true
    }
    return (
      <Slide duration={500} bottom={true} left={animation} right={!animation}>
        <View className={messageClass}>
          {yourIcon}
          <View className="messageBox">
            <View className="inner">{this.props.message}</View>
          </View>
          {myIcon}
        </View>
      </Slide>
    )
      ;
  }

}
